<html>
    <head>
        <meta charset="utf-8">
        <title>Image stream</title>
        <style>
         #container {
             margin: 0px auto;
             border: 0px #333 solid;
         }
         #videoElement {
             width: 640px;
             height: 480px;
             background-color: #666;
         }

         #imageElement {
             width: 800px;
             height: 600px;
             background-color: #000;
         }

        </style>
    </head>
    <body>
        <h3>
            Live stream:
        </h3> 
        <div id="container">
            <img id="imageElement" src="{{ url_for('video_feed') }}">
        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
        <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    </body>
</html>
